/* ============================================================ NSCOU Google Reviews page — custom styles Save as: wwwroot/css/google-review.css (no space in the name) Load AFTER Bootstrap in the page . ============================================================ */ :root { --nsc-navy: #09233f; --nsc-navy-light: #12395f; --nsc-blue: #1565c0; --nsc-gold: #f4b400; --nsc-red: #c62828; --nsc-ink: #18212b; --nsc-muted: #66717d; --nsc-border: #dfe5eb; --nsc-light: #f5f8fb; --google-red: #ea4335; --google-blue: #4285f4; --google-yellow: #fbbc05; --google-green: #34a853; } body { margin: 0; color: var(--nsc-ink); background: #fff; font-family: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: "Zilla Slab", Georgia, serif; } /* ---- Hero ---- */ .rv-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at top right, rgba(21, 101, 192, .4), transparent 35%), linear-gradient(135deg, var(--nsc-navy) 0%, var(--nsc-navy-light) 100%); } .rv-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 390px; height: 390px; border-radius: 50%; background: rgba(255, 255, 255, .04); } .rv-hero-content { position: relative; z-index: 2; } .g-logo { display: inline-flex; align-items: center; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: -1px; } .g1 { color: var(--google-blue); } .g2 { color: var(--google-red); } .g3 { color: var(--google-yellow); } .g4 { color: var(--google-green); } .rv-score { font-family: "Zilla Slab", Georgia, serif; font-size: 4.5rem; font-weight: 700; line-height: 1; } .rv-stars svg { width: 24px; height: 24px; fill: var(--google-yellow); } .rv-bar-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: 12px; align-items: center; color: #dbe7f3; font-size: .95rem; } .rv-bar { height: 9px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .18); } .rv-bar span { display: block; height: 100%; border-radius: inherit; background: var(--google-yellow); } /* ---- Results strip ---- */ .rv-results { border-top: 1px solid rgba(255, 255, 255, .15); } .rv-result-num { font-family: "Zilla Slab", Georgia, serif; font-size: 1.9rem; font-weight: 700; color: var(--nsc-gold); line-height: 1.1; } .rv-result-label { color: #c4d2e1; font-size: .95rem; max-width: 16rem; } .rv-result-note { color: #8fa3b8; font-size: .8rem; } /* ---- Buttons ---- Double-class selectors (.btn.btn-review) outrank Bootstrap's .btn, so these work whatever order the stylesheets load in. */ .btn.btn-review { padding: 12px 22px; color: #17202a; border: 0; border-radius: 8px; background: var(--nsc-gold); font-weight: 700; } .btn.btn-review:hover, .btn.btn-review:focus { color: #17202a; background: #ffca28; } .btn.btn-join { padding: 12px 22px; color: #fff; border: 0; border-radius: 8px; background: var(--nsc-red); font-weight: 700; } .btn.btn-join:hover, .btn.btn-join:focus { color: #fff; background: #a31515; } .btn.btn-review:focus-visible, .btn.btn-join:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 2px; } /* Small verification link under the hero buttons */ .rv-verify { color: #c4d2e1; font-size: .9rem; } .rv-verify a { color: #f7c84b; } /* ---- Layout ---- */ .rv-thread { max-width: 900px; } .rv-support-section { background: var(--nsc-light); border-bottom: 1px solid var(--nsc-border); } .rv-section-label { color: var(--nsc-blue); font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .rv-theme { display: inline-flex; align-items: center; padding: 9px 15px; color: var(--nsc-navy); border: 1px solid #cfdae5; border-radius: 99px; background: #fff; box-shadow: 0 3px 10px rgba(9, 35, 63, .05); font-size: .96rem; font-weight: 600; } .rv-theme::before { margin-right: 7px; color: var(--google-green); content: "✓"; font-weight: 700; } /* ---- Review cards ---- */ .rv-case { overflow: hidden; border: 1px solid var(--nsc-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(9, 35, 63, .07); } .rv-review { padding: 28px; } .rv-avatar { position: relative; display: flex; flex: 0 0 52px; align-items: center; justify-content: center; width: 52px; height: 52px; color: #fff; border-radius: 50%; font-size: 1.3rem; font-weight: 700; } .rv-gbadge { position: absolute; right: -3px; bottom: -3px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .2); } .rv-gbadge svg { width: 16px; height: 16px; } .rv-card-stars svg { width: 20px; height: 20px; fill: var(--google-yellow); } .rv-meta { color: var(--nsc-muted); font-size: .93rem; } .rv-quote { color: #263442; font-size: 1.08rem; line-height: 1.7; } /* Outcome ribbon */ .rv-outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 18px; padding: 12px 16px; border-left: 4px solid var(--nsc-gold); border-radius: 0 8px 8px 0; background: #fdf7e7; color: #5c4a09; font-size: .95rem; } .rv-outcome strong { color: #3f3306; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; white-space: nowrap; } /* Topic tag */ .rv-help-tag { display: inline-block; margin-top: 17px; padding: 6px 11px; color: #1f5132; border: 1px solid #cce4d4; border-radius: 6px; background: #eff9f2; font-size: .88rem; font-weight: 600; } .rv-link { color: var(--nsc-blue); font-weight: 600; } .rv-close { color: #fff; background: linear-gradient(135deg, var(--nsc-navy) 0%, var(--nsc-navy-light) 100%); } .rv-close p { color: #c4d2e1; } .rv-disclaimer { max-width: 760px; margin: 0 auto; color: var(--nsc-muted); font-size: .88rem; } @media (prefers-reduced-motion: no-preference) { .rv-case { transition: box-shadow .2s ease; } .rv-case:hover { box-shadow: 0 14px 34px rgba(9, 35, 63, .12); } } @media (max-width: 767px) { .rv-score { font-size: 3.7rem; } .rv-review { padding: 22px; } .rv-review-header { align-items: flex-start !important; } .rv-card-stars { width: 100%; margin-top: 6px; } } .btn.btn-member { background: #ffffff; color: #0B2A4A; border: 2px solid #ffffff; font-weight: 600; padding: 12px 28px; border-radius: 8px; transition: all .25s ease; } .btn.btn-member:hover, .btn.btn-member:focus { background: transparent; color: #ffffff; border-color: #ffffff; }